<xsl:stylesheet version="1.1"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"                
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
            
	<xsl:param name="foreground-color">#FFFFFF</xsl:param>
	<xsl:param name="background-color">#000000</xsl:param>
	<xsl:param name="outline-color">#000000</xsl:param>
	<xsl:param name="font-size">50</xsl:param>
	<xsl:param name="font-face">Verdana</xsl:param>
	<xsl:param name="cap-width">640</xsl:param>
	<xsl:param name="cap-height">480</xsl:param>
	<xsl:param name="head-width">150</xsl:param>
	<xsl:param name="head-height">240</xsl:param>
	<xsl:param name="margin">20</xsl:param>
	<xsl:param name="personalisation-color">white</xsl:param>
	<xsl:param name="line-height">24</xsl:param>
	<xsl:param name="name"/>

  	<xsl:output method="xml"/>
  
  	<xsl:template match="/">
    	<xsl:variable name="width" select="$cap-width * 3 + $margin * 2"/>
    	<xsl:variable name="height" select="$cap-height * 2 + $margin * 2"/>

		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}" version="1.1">
	    	<g>
	    		<rect x="0" y="0" width="{$width}" height="{$height}" fill="gray" stroke="none"/>
	    		<g transform="translate(0, 0)">
		    		<xsl:call-template name="back-side"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Back</text>		    		
	    		</g>
	    		<g transform="translate(0, {$cap-height + $margin})">
		    		<xsl:call-template name="front-side"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Front (any personalised text should be centred at bottom)</text>
	    		</g>
	    		<g transform="translate({$cap-width + $margin}, 0)">
		    		<xsl:call-template name="right-side"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Right</text>
	    		</g>
	    		<g transform="translate({$cap-width + $margin}, {$cap-height + $margin})">
	    			<xsl:call-template name="left-side"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Left</text>
	    		</g>
	    		<g transform="translate({($cap-width + $margin)*2}, 0)">
	    			<xsl:call-template name="top-side"/>
		    		<text x="0" y="{$cap-width + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Top</text>
	    		</g>
	    		<g transform="translate({($cap-width + $margin)*2}, {$cap-width + $margin})">
	    			<g transform="scale({($cap-height * 2 - $cap-width) div ($cap-height * 2 + $cap-width)})">
		    			<xsl:call-template name="assembled"/>
			    	</g>
	    		</g>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin"/>
					<xsl:with-param name="color" select="$outline-color"/>
					<xsl:with-param name="label">Outline</xsl:with-param>
				</xsl:call-template>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin - $line-height * 2"/>
					<xsl:with-param name="color" select="$foreground-color"/>
					<xsl:with-param name="label">Foreground</xsl:with-param>
				</xsl:call-template>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin - $line-height * 4"/>
					<xsl:with-param name="color" select="$background-color"/>
					<xsl:with-param name="label">Background</xsl:with-param>
				</xsl:call-template>
	        </g>
		</svg>	  
  	</xsl:template>
  	
  	<xsl:template name="color-block">
  		<xsl:param name="x"/>
  		<xsl:param name="y"/>
  		<xsl:param name="color"/>
  		<xsl:param name="label"/>
  		<rect x="{$x - $line-height}" y="{$y - $line-height}" width="{$line-height}" height="{$line-height}" fill="{$color}" stroke="black"/>
  		<text x="{$x - $line-height * 2}" y="{$y}" baseline-shift="0%" font-size="{$line-height}" text-anchor="end"><xsl:value-of select="$label"/> (<xsl:value-of select="$color"/>)</text>
  	</xsl:template>
  	
  	<xsl:template name="assembled">
  		<g transform="translate({$cap-height + $cap-width},{$cap-height})">
  			<g transform="rotate(180)">
  				<xsl:call-template name="back-side"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height})">
  			<xsl:call-template name="top-side"/>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height})">
  			<g transform="rotate(90)">
  				<xsl:call-template name="right-side"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height + $cap-width}, {$cap-height + $cap-width})">
  			<g transform="rotate(270)">
  				<xsl:call-template name="left-side"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height + $cap-width})">
  			<xsl:call-template name="front-side"/>
  		</g>
  	</xsl:template>
  	
  	<xsl:template name="top-side">
  		<rect x="0" y="0" width="{$cap-width}" height="{$cap-width}" fill="{$background-color}" stroke="none"/>
  		<rect x="0" y="0" width="{$cap-width div 2}" height="{$cap-width div 2}" fill="{$foreground-color}" stroke="none"/>
  		<rect x="{$cap-width div 2}" y="{$cap-width div 2}" width="{$cap-width div 2}" height="{$cap-width div 2}" fill="{$foreground-color}" stroke="none"/>
  	</xsl:template>
  	
  	<xsl:template name="back-side">
  		<xsl:call-template name="reverse-background"/>
  		<!-- 
  		<defs>
  			<xsl:variable name="r" select="$cap-width div 17.5"/>
  			<path id="circle1" d="M {$cap-width div 2 - $r} {$cap-height} a {$r},{$r} 0 0,1 {$r * 2},0"/>
  			<path id="circle2" d="M {$cap-width div 2} {$cap-height - $font-size} a {$r},{$r} 0 0,1 0,{-$r * 2}"/>
  			<clipPath id="rect">
  				<rect id="rect" x="0" y="0" width="{$cap-width div 2}" height="{$cap-height}"/>
  			</clipPath>
  			
  		</defs>
  		 -->
  		<!-- 
 	 	<text font-family="Verdana" font-size="{$font-size div 2}" fill="{$background-color}">
		    <textPath xlink:href="#circle1">
      			TAMARAMA
    		</textPath>
  		</text>
 	 	<text font-family="Verdana" font-size="{$font-size div 2}" fill="{$foreground-color}" clip-path="url(#rect)">
		    <textPath xlink:href="#circle1">
      			TAMARAMA
    		</textPath>
  		</text>
	 	<text font-family="Verdana" font-size="{$font-size div 2}" fill="{$background-color}" x="{$cap-width div 2}" y="{$cap-height}" text-anchor="middle">
    			SLSC
  		</text>
	 	<text font-family="Verdana" font-size="{$font-size div 2}" fill="{$foreground-color}" x="{$cap-width div 2}" y="{$cap-height}" text-anchor="middle" clip-path="url(#rect)">
    			SLSC
  		</text>
  		 -->
   		<g transform="translate({($cap-width - 120) div 2}, {$cap-height - 160 - $font-size})">
	  		<xsl:call-template name="head">
	  			<xsl:with-param name="foreground" select="$foreground-color"/>
	  			<xsl:with-param name="background" select="$background-color"/>
	  			<xsl:with-param name="outline" select="$outline-color"/>
	  		</xsl:call-template>
   		</g>  		
  	</xsl:template>

  	<xsl:template name="front-side">
  		<xsl:call-template name="reverse-background"/>
  		<text x="{$cap-width div 2}" y="{$cap-height}" font-family="{$font-face}" font-size="{$font-size}" baseline-shift="100%" font-weight="bold" fill="{$personalisation-color}" text-anchor="middle"><xsl:value-of select="$name"/></text>
  	</xsl:template>
  	
  	<xsl:template name="left-side">
  		<xsl:call-template name="background"/>
  		<!-- 
  		<xsl:call-template name="text">
  			<xsl:with-param name="baseline-y" select="$cap-height * 0.8"/>
 			<xsl:with-param name="o-cx" select="$cap-width div 2"/>
			<xsl:with-param name="o-r" select="$font-size div 2"/>		
  			<xsl:with-param name="right-color" select="$foreground-color"/>
  			<xsl:with-param name="left-color" select="$background-color"/>
  		</xsl:call-template>
 -->
  	</xsl:template>
  	
  	<xsl:template name="right-side">
		<xsl:call-template name="background"/>
		<xsl:variable name="t-width" select="$font-size"/>
		<xsl:variable name="t-height" select="$font-size"/>
		<!-- 
		<g transform="translate({$cap-width - $t-width div 2}, {$cap-height - $t-width})">
			<xsl:call-template name="T">
				<xsl:with-param name="t-width" select="$t-width"/>
				<xsl:with-param name="t-height" select="$t-height"/>
			</xsl:call-template>
		</g>
		 -->
		 <!-- 
  		<g transform="translate({$cap-width}, 0) scale(-1, 1)">
  			<xsl:call-template name="text">
  				<xsl:with-param name="baseline-y" select="$cap-height * 0.8"/>
  				<xsl:with-param name="o-cx" select="$cap-width div 2"/>
  				<xsl:with-param name="o-r" select="$font-size div 2"/>
  			</xsl:call-template> 
  		</g>
  		 -->
  	</xsl:template>
  	
  	<xsl:template name="background">
  		<rect x="0" y="0" width="{$cap-width}" height="{$cap-height}" fill="{$background-color}" stroke="none"/>
  		<rect x="0" y="0" width="{$cap-width div 2}" height="{$cap-height}" fill="{$foreground-color}" stroke="none"/>
  	</xsl:template>

  	<xsl:template name="reverse-background">
  		<rect x="0" y="0" width="{$cap-width}" height="{$cap-height}" fill="{$foreground-color}" stroke="none"/>
  		<rect x="0" y="0" width="{$cap-width div 2}" height="{$cap-height}" fill="{$background-color}" stroke="none"/>
  	</xsl:template>
  	
  	<xsl:template name="head">
  		<xsl:param name="foreground">#000000</xsl:param>
  		<xsl:param name="background">#FFFFFF</xsl:param>
  		<xsl:param name="outline">#000000</xsl:param>
   		<defs>
			<clipPath id="rect">
	 			<rect id="rect" x="0" y="0" width="55" height="200"/>
	 		</clipPath>
	 	</defs>
  		<!-- 
  		<path d="
  			M 0,60 
  			C 0,0 100,0 100,60 
  			L 100,90 
  			C 100,120 100,120 120,120 
  			L 50,120 
  			C 55,100 55,100 65,100 
  			C 80,100 80,100 80,82
  			C 80,82 80,82 85,82
  			C 87,82 87,82 80,70
  			L 80,65 
  			C 80,30 30,30 30,60 
  			z" 
  			fill="{$color}" stroke="none"/>
  			-->
  		<g transform="translate(8,0) rotate(0)">
	  		<path d="
	  			M -10,60 
	  			C -10,0 100,0 100,60 
	  			L 100,90 
	  			C 100,118 100,118 120,118 
	  			L 60,118 
	  			C 30,118 10,88 10,60
	  			C 10,40 -10,40 -10,60
	  			z" 
	  			fill="{$outline}" stroke="none"/>
	  			<!-- 
	  		<path d="
	  			M 0,60 
	  			C 0,0 120,0 120,80 
	  			C 120,100 140,100 140,80
	  			C 140,140 20,140 20,60
	  			C 20,40 0,40 0,60 
	  			z" 
	  			fill="{$outline}" stroke="none"/>
	  			 -->
	  		<path d="
	  			M 52,120 
	  			C 55,100 55,100 65,100 
	  			C 80,100 80,100 80,82
	  			C 80,82 80,82 85,82
	  			C 87,82 87,82 80,70
	  			L 80,65 
	  			C 80,30 30,30 30,70 
	  			C 30,80 30,80 35,90
	  			C 23,120 0,130 0,120
	  			z" 
	  			fill="{$background}" stroke="none" transform="translate(0,0)"/>
	  		<path d="
	  			M 80,63 
	  			C 80,30 30,30 30,68 
	  			z" 
	  			fill="{$foreground}" stroke="none" transform="translate(0,0)" clip-path="url(#rect)"/>
	  			<!-- 
 			<rect x="60" y="0" width="100" height="200" fill="{$foreground}"/>
 			 -->
	  			
	  		<line x1="20" y1="70" x2="100" y2="58" stroke="{$outline}" stroke-width="4"/>
	  		<line x1="60" y1="79" x2="70" y2="110" stroke="{$outline}" stroke-width="4"/>
	  		<line x1="60" y1="79" x2="50" y2="68" stroke="{$outline}" stroke-width="4"/>
	  		<line x1="60" y1="79" x2="65" y2="64" stroke="{$outline}" stroke-width="4"/>

	  		
	  	</g>
  	</xsl:template>
  	
  	<xsl:template name="text">
  		<xsl:param name="o-r" select="$font-size"/>
  		<xsl:param name="o-cx">0</xsl:param>
  		<xsl:param name="baseline-y">0</xsl:param>
  		<xsl:param name="left-color" select="$foreground-color"/>
  		<xsl:param name="right-color" select="$background-color"/>
  		<xsl:param name="o-stroke-width" select="$font-size div 8"/>
  		<g font-family="{$font-face}" font-size="{$font-size}">
    		<text x="{$o-cx - $o-r}" y="{$baseline-y - $o-r}" fill="{$left-color}" text-anchor="end" baseline-shift="-40%">T</text>
    		<text x="{$o-cx + $o-r}" y="{$baseline-y - $o-r}" fill="{$right-color}" baseline-shift="-40%">SS</text>
 	 	</g>
 	 	<xsl:variable name="cx" select="$o-cx"/>
 	 	<xsl:variable name="cy" select="$baseline-y - ($o-r - $o-stroke-width div 2)"/>
 	 	<xsl:variable name="r" select="$o-r - $o-stroke-width div 2"/>
 	 	<g>
 	 		<clipPath id="bottomClip">
 	 			<rect x="{$cx - $r}" y="{$cy}" width="{$r * 2}" height="{$r}"/>
 	 		</clipPath>
 			<circle clip-path="url(#bottomClip)" cx="{$cx}" cy="{$cy}" r="{$r - $o-stroke-width}" stroke="none" fill="{$right-color}"/>
 	 	</g>
 	 	<g>
	 		<clipPath id="leftClip">
 	 			<rect x="{$cx}" y="0" width="{$cap-width}" height="{$cap-height}"/>
 	 		</clipPath>
	 	 	<circle cx="{$cx}" cy="{$cy}" r="{$r - $o-stroke-width div 2}" fill="none" stroke="{$background-color}" stroke-width="{$o-stroke-width * 1.5}"/>
 	 	</g>
 	 	<circle cx="{$cx}" cy="{$cy}" r="{$r - $o-stroke-width - 1}" fill="none" stroke="{$foreground-color}" stroke-width="{$o-stroke-width div 2}"/>  
 	 	<!-- 
 	 	<g>
 	 		<clipPath id="rightClip">
 	 			<rect x="{$cx}" y="0" width="{$cap-width}" height="{$cap-height}"/>
 	 		</clipPath>
	 	 	<circle x="{$cx}" cy="{$cy}" r="{$r}" fill="none" stroke="{$right-color}" stroke-width="{$o-stroke-width}"/>
 	 	</g>
 	 	 -->
  	</xsl:template>
  	
  	<xsl:template name="T">
  		<xsl:param name="t-width" select="$font-size"/>
  		<xsl:param name="t-height" select="$font-size"/>
  		<xsl:param name="t-thickness" select="$font-size div 3"/>
		<path d="M 0 0 L {$t-width} 0 L {$t-width} {$t-thickness} L {($t-width + $t-thickness) div 2} {$t-thickness} L {($t-width + $t-thickness) div 2} {$t-height} L {($t-width - $t-thickness) div 2} {$t-height} L {($t-width - $t-thickness) div 2} {$t-thickness} L 0 {$t-thickness} z" stroke="{$foreground-color}" fill="{$background-color}" stroke-width="5"/>
  	</xsl:template>
  
</xsl:stylesheet>